<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram of a Rotating Ring in a Magnetic Field</title>
</head>
<body>
  <canvas id="canvas" width="550" height="550"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters
    const cx = 275;
    const cy = 250;
    const radius = 150;

    // Helper function to draw an arrowhead on a line
    function drawArrow(ctx, x1, y1, x2, y2, headlen = 10) {
        const angle = Math.atan2(y2 - y1, x2 - x1);
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
        ctx.restore();
    }
    
    // Helper function to draw a filled dot
    function drawDot(ctx, x, y, r = 3) {
        ctx.save();
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fill();
        ctx.restore();
    }

    // --- Start Drawing ---

    // 1. Draw Coordinate Axes
    ctx.beginPath();
    // Vertical axis
    ctx.moveTo(cx, cy - radius - 70);
    ctx.lineTo(cx, cy + radius + 50);
    // Horizontal axis
    ctx.moveTo(cx - radius - 50, cy);
    ctx.lineTo(cx + radius + 50, cy);
    ctx.stroke();

    // 2. Draw the uniform magnetic field B
    const line_x_start = cx - radius - 50;
    const line_x_end = cx + radius + 50;
    const spacing = 45;

    ctx.save();
    ctx.lineWidth = 1.5;
    
    // Draw 3 lines above and 3 below the center axis
    for (let i = 1; i <= 3; i++) {
        const y_up = cy - i * spacing;
        const y_down = cy + i * spacing;
        
        // Line above
        ctx.beginPath();
        ctx.moveTo(line_x_start, y_up);
        ctx.lineTo(line_x_end, y_up);
        ctx.stroke();
        drawArrow(ctx, line_x_end - 30, y_up, line_x_end, y_up, 8);
        
        // Line below
        ctx.beginPath();
        ctx.moveTo(line_x_start, y_down);
        ctx.lineTo(line_x_end, y_down);
        ctx.stroke();
        drawArrow(ctx, line_x_end - 30, y_down, line_x_end, y_down, 8);
    }
    ctx.restore();

    // Arrow and label for the central B field line (the x-axis)
    drawArrow(ctx, cx + radius + 20, cy, cx + radius + 50, cy);
    ctx.font = 'italic bold 24px Times New Roman';
    ctx.fillText('B', cx + radius + 70, cy);


    // 3. Draw the Circle (Ring)
    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
    ctx.stroke();


    // 4. Draw the rotation symbol ω
    const rotation_axis_top_y = cy - radius - 20;
    // Stem of the rotation axis
    ctx.beginPath();
    ctx.moveTo(cx, cy - radius);
    ctx.lineTo(cx, rotation_axis_top_y);
    ctx.stroke();
    
    const omega_arc_radius = 25;
    const omega_arc_center_y = rotation_axis_top_y + 5;
    
    // Curved arrow for rotation
    ctx.beginPath();
    const startAngle = Math.PI * 1.3;
    const endAngle = Math.PI * 1.95;
    ctx.arc(cx, omega_arc_center_y, omega_arc_radius, startAngle, endAngle);
    ctx.stroke();

    // Arrowhead for omega
    const omega_arrow_x = cx + omega_arc_radius * Math.cos(endAngle);
    const omega_arrow_y = omega_arc_center_y + omega_arc_radius * Math.sin(endAngle);
    drawArrow(ctx, omega_arrow_x - 1, omega_arrow_y + 1, omega_arrow_x, omega_arrow_y, 8);
    
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('ω', cx + omega_arc_radius + 20, omega_arc_center_y - 20);


    // 5. Draw and label points
    ctx.font = 'italic 20px Times New Roman';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    
    // Point O (Origin)
    ctx.fillText('O', cx - 25, cy + 10);

    // Point b
    const b_x = cx;
    const b_y = cy - radius;
    drawDot(ctx, b_x, b_y);
    ctx.fillText('b', b_x + 10, b_y);

    // Point c
    const c_x = cx + radius;
    const c_y = cy;
    drawDot(ctx, c_x, c_y);
    ctx.fillText('c', c_x + 10, c_y + 10);

    // Point d (midpoint of arc bc, so 45 degrees from the vertical axis)
    const d_angle = -Math.PI / 4; // -45 degrees from horizontal
    const d_x = cx + radius * Math.cos(d_angle);
    const d_y = cy + radius * Math.sin(d_angle);
    drawDot(ctx, d_x, d_y);
    ctx.fillText('d', d_x + 8, d_y - 8);

    // 6. Draw the caption
    ctx.font = '22px "SimSun", "Songti SC"';
    ctx.textAlign = 'center';
    ctx.fillText('习题 9-8 图', cx, cy + radius + 80);

  </script>
</body>
</html>